<template>
  <div class="page">
    <div class="containerInner">
      <div class="wrapper">
        <div class="header">
          <div class="group">
            <img
                class="iconUser"
                src="../assets/img/img_0.png"
            />
            <span class="chime">Pistachio</span>
          </div>
          <!--          导航栏提取-->
          <Navigation></Navigation>
          <!--          登陆注册栏提取-->
          <LoginBar class="login-bar"></LoginBar>
        </div>
        <div class="search">
          <!--          搜索框组件提取-->
          <SearchBar></SearchBar>
        </div>
        <div class="body">

          <div class="row">
            <div class="listItem">
              <div class="maskBox">
                <img src="../assets/img/login_3.png" class="imgStyle">
                <div class="mask"></div>
              </div>
              <span class="textStyle">喵了个喵的</span>
            </div>
            <div class="listItem">
              <div class="maskBox">
                <img src="../assets/img/login_3.png" class="imgStyle">
                <div class="mask"></div>
              </div>
              <span class="textStyle">喵了个喵的</span>
            </div>
           <div class="listItem2">
             <div class="maskBox">
               <img src="../assets/img/login_3.png" class="imgStyle">
               <div class="mask"></div>
             </div>
             <span class="textStyle">喵了个喵的</span>
            </div>

          </div>
          <div class="row">
            <div class="listItem">
              <div class="maskBox">
                <img src="../assets/img/login_3.png" class="imgStyle">
                <div class="mask"></div>
              </div>
              <span class="textStyle">喵了个喵的</span>
            </div>
            <div class="listItem">
              <div class="maskBox">
                <img src="../assets/img/login_3.png" class="imgStyle">
                <div class="mask"></div>
              </div>
              <span class="textStyle">喵了个喵的</span>
            </div>
           <div class="listItem2">
             <div class="maskBox">
               <img src="../assets/img/login_3.png" class="imgStyle">
               <div class="mask"></div>
             </div>
             <span class="textStyle">喵了个喵的</span>
            </div>

          </div>


        </div>
        <img
            class="logo"
            src="../assets/img/img_4.png"
            @click="toCustomization"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "@/components/Navigation";
import LoginBar from "@/components/LoginBar";
import SearchBar from "@/components/SearchBar";


export default {
  components: {
    Navigation,
    LoginBar,
    SearchBar,

  },
  data() {
    return {
      content: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods: {
    toSearchPage(){
      this.$router.push('/searchPage')
    },
    toCustomization(){
      this.$router.push('/customization')
    }
  },
  // mounted() {
  // },

}
</script>

<style src="./css/Recommend.css" scoped/>
;
